<template>
	<view style="padding-bottom: 100rpx;">
		<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" 
		:options="{ margin: 10 }">
		</uqrcode> -->
		<view class="my-info">
			<view class="my-header">
				<i class="iconfont icons icon-jifen"></i>
				<text class="text">积分支付</text>
			</view>
			<view class="qrcode-box">
				<view class="qrcode-id">L21580224817</view>
				<canvas @click="saveImage"
				 class="uqrcode-canvas"
				  canvas-id="uqrcode"
					id="uqrcode"
				/>
			</view>
		</view>
		<view class="my-desc">
			<view class="desc-header">
				<i class="iconfont icons icon-liebiao"></i>
				<text class="text">使用须知</text>
			</view>
			<view class="user-need">
				<view>1、可使用商家，请查看消费商家列表名录，各商家详细信息可点击进入查看;</view>
				<view>2、文化保障卡积分，仅可在文化保障卡对应的商家列表内使用;</view>
				<view>蛋糕卡积分，仅可在蛋糕卡对应的商家列表内使用;</view>
				<view>自由行卡积分，仅可在自由行卡对应的商家列表内使用;</view>
				<view>2、遇系统使用问题，可联系:18258521300(微信同号)。</view>
				<view>3、严禁倒卖、套现!</view>
				<view>4、请关注使用有效期!</view>
			</view>
		</view>
		
		<view class="my-help">
			<view class="help-header">
				<i class="iconfont icons icon-bangzhuzhongxin"></i>
				<text class="text">帮助中心</text>
			</view>
			<view class="help-text">
				咨询热线:18258521300
			</view>
		</view>
		
		<view class="btn-box">
			<u-button type="success" shape="circle" color="#73B683" :plain="true" text="查看消费商家" @click="toLink('/pages/my/shop/shop')"></u-button>
			<u-button type="success" shape="circle" color="#73B683" :plain="true" text="消费明细" @click="toLink('/pages/code/record')"></u-button>
		</view>
	</view>

</template>

<script>
	import UQRCode from '@/common/utils/uqrcode.js'
	export default {
		data() {
			return {
				loading:true
			}
		},
		onReady() {
			this.getCode()
			
		},
		methods: {
			getCode(){
				var qr = new UQRCode();
				qr.data = "/visiterInfo/?key=visiter&id="  ;
				qr.size = uni.upx2px(300);
				// qr.foregroundColor = 'rgba(72,118,255,0.8)';
				qr.make();
				var canvasContext = uni.createCanvasContext('uqrcode', this); // 如果是组件，this必须传入
				qr.canvasContext = canvasContext;
				qr.drawCanvas();
				this.loading = false
				//上面是展示到页面
				
			},
			saveImage(){
				// this.$refs.uqrcode.toTempFilePath({
				// 	success: res => {
				// 		const imglist = []
				// 		imglist.push(res.tempFilePath)
				// 		uni.previewImage({
				// 			current: res.tempFilePath,
				// 			indicator: 'number',
				// 			loop: true,
				// 			urls: imglist
				// 		});
				// 	}
				// });
				//下面是canvas生成图片
				uni.canvasToTempFilePath({
					canvasId:'uqrcode',
					success: (res) => {
						const imglist = []
						imglist.push(res.tempFilePath)
						uni.previewImage({
							current: res.tempFilePath,
							indicator: 'number',
							loop: true,
							urls: imglist
						});
				
						// uni.saveImageToPhotosAlbum({
						// 	filePath:res.tempFilePath,
						// 	success:(rel)=>{
						// 		this.codeImg = rel.file
						// 		this.init()
						// 	},
						// 	fail: (err) => {
						// 		this.$api.msg(err.errMsg)
						// 	}
						// })
					
						
					}
				})
			},
			toLink(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>

<style lang="less">
page{
	background: #73B683;
}
.my-info{
	margin: 20rpx;
	padding: 30rpx 20rpx 20rpx;
	background: #fff;
	border-radius: 10rpx;
	.my-header{
		display: flex;
		align-items: center;
		.icons{
			margin-right: 10rpx;
		}
		.text{
			font-size: 26rpx;
			font-weight: 500;
		}
	}
	.qrcode-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		.qrcode-id{
			color: #ccc;
			margin-bottom: 20rpx;
		}
		.uqrcode-canvas{
			width: 300rpx;
			height: 300rpx;
		}
	}
}
.my-desc{
	margin: 20rpx;
	padding: 30rpx 20rpx 20rpx;
	background: #fff;
	border-radius: 10rpx;
	.desc-header{
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		padding-bottom: 18rpx;
		border-bottom: 1px solid #ccc;
		.icons{
			margin-right: 10rpx;
		}
		.text{
			font-size: 26rpx;
			font-weight: 500;
		}
	}
	.user-need{
		font-size: 26rpx;
	}
}
.my-help{
	margin: 20rpx;
	padding: 30rpx 20rpx 20rpx;
	background: #fff;
	border-radius: 10rpx;
	.help-header{
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		padding-bottom: 18rpx;
		border-bottom: 1px solid #ccc;
		.icons{
			margin-right: 10rpx;
		}
		.text{
			font-size: 26rpx;
			font-weight: 500;
		}
	}
	.help-text{
		font-size: 26rpx;
		color: #ccc;
	}
}
.btn-box{
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	background: #fff;
}

</style>
